import React from "react";
import WeUI from 'react-weui'
import IconUser from'./assets/img/user.png'
const {
    Tab,
    TabBody,
    Cells,
    CellHeader,
    CellBody,
    Cell,
    Badge,
    CellFooter
}= WeUI
const User = () =>{
    // 页面组件化思维
    return (
   <Tab>
       <TabBody>
           <div>
               <Cells style={{marginTop:'0px'}}>
                   <Cell>
                   {/* react 行内样式 {驼峰式} */}
                   <CellHeader style={{position:'relative',marginRight:'10px'}}>
                       <img src={IconUser} style={{width:'50px',display:'block'}}></img>
                       {/* src = ./src/assets/img/user.png */}
                   </CellHeader>
                   <CellBody>
                       <p>光头强</p>
                       <p style={{fontSize:'13px',color:'#888888'}}> 欢迎来到图书馆漂流瓶</p>
                   </CellBody>
                   </Cell>
                   {/* react-weui 文档  props */}
                   <Cell access>
                       <CellBody >
                           订单<Badge preset='body'>8</Badge>
                       </CellBody>
                       <CellFooter/>
                   </Cell>
                   <Cell access>
                       <CellBody>
                           发出的申请<Badge preset='body'>8</Badge>
                       </CellBody>
                       <CellFooter/>
                   </Cell>
                   <Cell access>
                       <CellBody>
                           收到的申请<Badge preset='body'>8</Badge>
                       </CellBody>
                       <CellFooter/>
                   </Cell>
                   <Cell access>
                       <CellBody>
                          收藏
                       </CellBody>
                       <CellFooter/>
                   </Cell>
                   <Cell access>
                       <CellBody>
                          地址
                       </CellBody>
                       <CellFooter/>
                   </Cell>
               </Cells>
           </div>
       </TabBody>
   </Tab>
        )
}
export default User